<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米官网</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/mi.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>

<body>
<!-- 头部 -->
    <div class="header list">
        <ul>
            <li><a href="">小米网&nbsp;|</a></li>
            <li><a href="">&nbsp;MIUI&nbsp;|</a></li>
            <li><a href="">&nbsp;米聊&nbsp;|</a></li>
            <li> <a href="">&nbsp;游戏&nbsp;|</a></li>
            <li><a href="">&nbsp;多看阅读&nbsp;|</a></li>
            <li><a href="">&nbsp;云服务&nbsp;|</a></li>
            <li><a href="">&nbsp;小米网移动版&nbsp;|</a></li>
            <li><a href="">&nbsp;Select region&nbsp;|</a></li>
            <li><a href="">&nbsp;米粉节答疑</a></li>
            <ul style="width: 61px;margin-right: 00px;">
                <li><a href="">注册&nbsp;|</a></li>
                <li><a href="">&nbsp;登录</a></li>
            </ul>
        </ul>
    </div>
    <!-- 中间内容区 -->
    <div class="content row">
        <!-- 搜索框区域 -->
        <div class="search">
            <img src="images/logo.png" alt="">
            <p>
                <img src="images/clock.png" alt="">4月14日开放购买
            </p>
            <input type="text" placeholder="搜索您需要的商品">
            <a id="search-img"></a>
            <div class="search-nei">
                <a href="">小米手环</a>
                <a href="">耳机音箱</a>
                <a href="">保护壳</a>
            </div>
            <button class="gouwu">
                <img src="images/shopcar.png">购物车</button>
        </div>
        <!--菜单 -->
        <div class="menu">
            <table class="table">
                <div class="fenlei">全部商品分类</div>
                <tr>
                    <td>
                        <a class="tou">购买手机</a>
                        <br>
                        <a style="margin-left: 15px;">小米Note</a>
                        <a>小米4</a>
                        <a>红米</a>
                        <a>红米Note</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a class="tou">购买电视与平板</a>
                        <br>
                        <a style="margin-left: 15px;">小米电视</a>
                        <a>小米盒子</a>
                        <a>小米平板</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a class="tou">路由器与智能硬件</a>
                        <br>
                        <a style="margin-left: 15px;">路由器</a>
                        <a>体重秤</a>
                        <a>净化器与滤芯</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a class="tou">插线板、移动电源与电池</a>
                        <br>
                        <a style="margin-left: 15px;">小米移动电源</a>
                        <a>电池</a>
                        <a>充电器</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a class="tou">耳机音箱与存储卡</a>
                        <br>
                        <a style="margin-left: 15px;">小米头戴式耳机</a>
                        <a>小米活塞耳机</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a class="tou">保护套与贴膜</a>
                        <br>
                        <a style="margin-left: 15px;">保护套/保护壳</a>
                        <a>贴膜</a>
                        <a>防尘塞</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a class="tou">后盖与个性化配件</a>
                        <br>
                        <a style="margin-left: 15px;">米键</a>
                        <a>后盖</a>
                        <a>贴纸</a>
                        <a>手机支架</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a class="tou">小米生活方式</a>
                        <br>
                        <a style="margin-left: 15px;">服装</a>
                        <a>米兔</a>
                        <a>背包</a>
                        <a>生活周边</a>
                    </td>
                </tr>
            </table>
        </div>
        <div class="nav">
            <ul class="col list ">
                <li><a href="#">首页</a></li>
                <li><a href="#">小米手机</a></li>
                <li><a href="#">红米</a></li>
                <li><a href="#">小米平板</a></li>
                <li><a href="#">小米电视</a></li>
                <li> <a href="#">盒子</a></li>
                <li><a href="#">路由器</a></li>
                <li><a href="#">合约机</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>
            </ul>
        </div>
        <div id="ibanner">
            <div id="ibanner-btn">
                 <span class="normal current">1</span>
                 <span class="normal">2</span>
                 <span class="normal">3</span>
                 <span class="normal">4</span>
                 <span class="normal">5</span>
            </div>
        </div>
        <div id="ibanner-pic">
            <a href=""><img src="images/banner5.png" alt=""></a>
            <a href=""><img src="images/banner4.png" alt=""></a>
            <a href=""><img src="images/banner3.png" alt=""></a>
            <a href=""><img src="images/banner2.png" alt=""> </a>
            <a href=""><img src="images/banner1.png" alt=""></a>
        </div>
        <script src="./js/index.js"></script>
        <div class="xianhuo col-80 border">
            <img class="col-4 border-right" src="images/01.png" alt="" >
            <img class="col-4 border-right" src="images/02.png" alt="">
            <img class="col-4" src="images/03.png" alt="" style="width:332px">
        </div>
        <div class="mingxing row">
            <div class="mingxing-header">
                <p>小米明星单品
                    <a href="">根据机型选配件</a>
                    <img class="border" src="images/06.png" alt="">
                    <img class="border" src="images/05.png" alt="">
                </p>
            </div>
            <div class="col-3 border danpin">
                <img src="images/T1PxJvBCAT1RXrhCrK!220x220.jpg" alt="">
                <a href="">小米智能插座</a>
                <p>让普通家电变得智能</p>
            </div>
            <div class="col-3 border danpin">
                <img src="images/T1XYxTBsAT1RXrhCrK!220x220.jpg" alt="">
                <a href="">小米空气净化器</a>
                <p>高性能智能空气净化器立即预约</p>
            </div>
            <div class="col-3 border danpin">
                <img src="images/T1y0JTBy_T1RXrhCrK!220x220.jpg" alt="" >
                <a href="">小米活塞耳机简装版</a>
                <p>好声音源自活塞式音腔，延续经典设计</p>
            </div>
            <div class="col-3 border danpin">
                <img src="images/aa.jpg" alt="">
                <a href="">小米路由器</a>
                <p>顶级双屏幕AC智能路由器，内置1TB大硬盘</p>
            </div>
        </div>
        <div class="xinpin row">
            <div class="xinpin-header">
                <p>新品上架</p>
                <a id="gengduo" href="">更多</a>
            </div>
            <div class="col-9 border">
                <div class="col-8 border-right "  id="img-xiaomi">
                    <img src="images/fanghezi0407xiao.jpg" alt="" style="width: 100%;">
                </div>
                <div class="col-4 one">
                    <span>
                        <a href="">小米手环</a>
                        <br>
                        <a href="">79元</a>
                    </span>
                    <img src="images/T1qaVvB7CT1RXrhCrK!220x220.jpg" alt="">
                </div>
            </div>
            <div class="col-9 border span">
                <div class="col-4 border-right">
                    <div class="col-12 border-b two">
                        <span>
                            <a href="">5周年米兔钥匙扣</a>
                            <br>
                            <a href="">9.9元</a>
                        </span>
                        <img src="images/yaoshi.png" alt="">
                    </div>
                    <div class="col-12 three">
                        <span>
                            <a href="">QCY派Q8蓝牙耳机</a>
                            <br>
                            <a href="">59.9元</a>
                        </span>
                        <img src="images/T1SrKTBmWT1RXrhCrK!220x220.jpg" alt="">
                    </div>
                </div>
                <div class="col-4 border-right four">
                    <span>
                        <a href="">小米T恤路标MILOGO</a>
                        <br>
                        <a href="">39元</a>
                    </span>
                    <img src="images/T1crEgBCYT1RXrhCrK!220x220.jpg" alt="">
                </div>
                <div class="col-4 five">
                    <span>
                        <a href="">小米4实木后盖</a>
                        <br>
                        <a href="">69元</a>
                    </span>
                    <img src="images/T12qZvB7CT1RXrhCrK!220x220.jpg" alt="">
                </div>
            </div>
            <div class="col-9 border span zuihou">
                <div class="col-4 border-right">
                    <span>
                        <a href="">小米note超薄保护壳</a>
                        <br>
                        <a href="">49元</a>
                    </span>
                    <img src="images/baohuke.png" alt="" style="margin-top: 18px;margin-right: 100px;">
                </div>
                <div class="col-4 border-right">
                    <span>
                        <a href="">小米自拍杆</a>
                        <br>
                        <a href="">49元</a>
                    </span>
                    <img src="images/T1DrL_B4CT1RXrhCrK!220x220.jpg" alt="">
                </div>
                <div class="col-4">
                    <span>
                        <a href="">先锋CL31系列耳式耳机</a>
                        <br>
                        <a href="">99元</a>
                    </span>
                    <img src="images/T1GXxvBsET1RXrhCrK!220x220.jpg" alt="">
                </div>
            </div>
            <div class="col-3 xinpin-right">
                <div class="border right-one">
                    <p>特价商品</p>
                    <img src="images/T1ByZTBjJT1RXrhCrK.jpg" alt="">
                    <span>
                        <a id="right-one-1" href="">SanDisk32GB存储卡</a>
                    </span>
                    <br>
                    <span>
                        <a href="" style="color:red;">79元</a>
                        <a href="" style="text-decoration: line-through ">109元</a>
                        <br>
                    </span>
                    <span>
                        <a href="">还有更多特价商品</a>
                    </span>
                </div>
                <div class="border right-one">
                    <span>
                        <a id="right-one-1" href="">特惠配件套餐</a>
                        <br>
                    </span>
                    <img id="img-r" src="images/channel-list-cool.jpg" alt="">
                    <span>
                        <a href="">手机必备配件组合购买</a>
                        <br>
                    </span>
                    <span>
                        <a href="">实惠更优惠</a>
                    </span>
                </div>
                <div class="border right-one">
                    <span>
                        <a id="right-one-1" href="">我爱酷玩</a>
                        <br>
                    </span>
                    <img id="img-r" src="images/channel-list-new.jpg" alt="">
                    <span>
                        <a href="">邂逅炫酷的电子产品</a>
                        <br>
                    </span>
                    <span>
                        <a href="">结交趣味相同的朋友</a>
                    </span>
                </div>
                <div class="border right">
                    <a href="">企业用户采购通道
                        <span>></span>
                    </a>
                    <p></p>
                    <a href="">小米手机防伪查询
                        <span>></span>
                    </a>
                    <p></p>
                    <a href="">小米手机官翻版
                        <span>></span>
                    </a>
                    <p></p>
                    <a href="">小米路由器官翻版
                        <span>></span>
                    </a>
                    <p></p>
                    <a href="">米粉红包
                        <span>></span>
                    </a>
                    <p></p>
                    <h4>话费充值</h4>
                    <input type="text" placeholder="请输入手机号">
                    <input type="text" placeholder="100元">
                    <button>▼</button>
                    <h5>实付价格98.4元起</h5>
                    <input id="submit" type="submit" value="立即充值">
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <div class="footer-nei">
            <div class="footer-one">
                <div class="footer-one-a">
                    <a href="">
                        <img src="images/10.png" alt="">
                    </a>
                    <br>
                    <a href="">1小时快修服务</a>
                </div>
                <div class="footer-one-a">
                    <a href="">
                        <img src="images/11.png" alt="">
                    </a>
                    <br>
                    <a href="">7天无理由退货</a>
                </div>
                <div class="footer-one-a">
                    <a href="">
                        <img src="images/12.png" alt="">
                    </a>
                    <br>
                    <a href="">15天免费换货</a>
                </div>
                <div class="footer-one-a">
                    <a href="">
                        <img src="images/13.png" alt="">
                    </a>
                    <br>
                    <a href="">满150元包邮</a>
                </div>
                <div class="footer-one-a">
                    <a href="">
                        <img src="images/14.png" alt="">
                    </a>
                    <br>
                    <a href="">520余家售后网点</a>
                </div>
            </div>
            <div class="footer-two">
                <div id="xian"></div>
                <div class="footer-two-lfet">
                    <div class="col-20 border-right">
                        <a href="">帮助中心</a>
                        <a href="">购物指南</a>
                        <a href="">支付方式</a>
                        <a href="">配送方式</a>
                    </div>
                    <div class="col-20 border-right">
                        <a href="">服务支持</a>
                        <a href="">售后政策</a>
                        <a href="">自助服务</a>
                        <a href="">相关下载</a>
                    </div>
                    <div class="col-20 border-right">
                        <a href="">小米之家</a>
                        <a href="">小米之家</a>
                        <a href="">服务网店</a>
                        <a href="">预约亲临到店服务</a>
                    </div>
                    <div class="col-20 border-right">
                        <a href="">关于小米</a>
                        <a href="">了解小米</a>
                        <a href="">加入小米</a>
                        <a href="">联系我们</a>
                    </div>
                    <div class="col-20 border-right">
                        <a href="">关注我们</a>
                        <a href="">新浪微博</a>
                        <a href="">小米部落</a>
                        <a href="">官方微信</a>
                    </div>
                </div>
                <div class="footer-two-r">
                    <p>400-100-5678</p>
                    <p>周一至周日8:00-18:00</p>
                    <p>(仅收市话费)</p>
                    <input type="submit" value="24小时在线客服">
                </div>
            </div>
            <div class="footer-three row">
                <ul>
                    <li><a>小米旗下网站：</a></li>
                    <li><a href="">小米网&nbsp;&nbsp;|</a></li>
                    <li><a href="">&nbsp;&nbsp;MIUI&nbsp;&nbsp;|</a></li>
                    <li><a href="">&nbsp;&nbsp;米聊&nbsp;&nbsp;|</a></li>
                    <li><a href="">&nbsp;&nbsp;多看书城&nbsp;&nbsp;|</a></li>
                    <li><a href="">&nbsp;&nbsp;小米路由器&nbsp;&nbsp;|</a></li>
                    <li><a href="">&nbsp;&nbsp;繁体香港&nbsp;&nbsp;|</a></li>
                    <li><a href="">&nbsp;&nbsp;繁体台湾&nbsp;&nbsp;|</a></li>
                    <li><a href="">&nbsp;&nbsp;English&nbsp;&nbsp;|</a></li>
                    <li><a href="">&nbsp;&nbsp;小米后院&nbsp;&nbsp;|</a></li>
                    <li><a href="">&nbsp;&nbsp;小米天猫店&nbsp;&nbsp;|</a></li>
                    <li><a href="">&nbsp;&nbsp;小米淘宝直营店&nbsp;&nbsp;|</a></li>
                    <li><a href="">&nbsp;&nbsp;小米网盟</a></li>
                </ul>
                <p>&copy;mi.com 京ICP证110507号 京ICP备10046444号 京公网安备1101080212535号 京网文[2014]0059-0009号</p>
                <img src="images/16.png" alt="">
                <input type="text" placeholder="简体中文">
                <button>▼</button>
            </div>
        </div>
    </div>
</body>

</html>